<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流和防抖</title>
</head>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>debounce</title>
    <style>
        #container {
            width: 100%;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            background-color: #444;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
</body>

</html>

<body>
    <script>
        let count = 1;
        let container = document.getElementById('container');

        function getUserAction() {
            container.innerHTML = count++;
        };


        // 防抖
        const debounce = function(fn, wait) {
            console.log('sart mousemove...')

            let timer;
            return (...args) => {
                console.log('moving...')

                clearTimeout(timer);
                timer = setTimeout(() => {
                    console.log('excute fn...')

                    fn(...args)
                }, wait)
            }
        }

        // 节流
        const throttle = function(fn, wait) {
            console.log('sart mousemove...')
            let timer;
            return (...args) => {
                console.log('moving...')

                if (timer) {
                    console.log('return')
                    return
                }
                timer = setTimeout(() => {
                    console.log('excute fn...')

                    fn(...args)
                    timer = null
                }, wait)
            }
        }

        // container.onmousemove = throttle(debounce, 1000)
        container.onmousemove = throttle(getUserAction, 1000)
    </script>
</body>

</html>